<template>
  <view class="category-page">
    <!-- 顶部区域 -->
    <view class="top-header">
      <view class="back-button" @click="goToMenu">
        <uni-icons size="28" color="#fff" type="left"></uni-icons>
      </view>
      <view class="header-content">
        <view class="header-title">{{ currentCategory.name }}</view>
        <view class="header-desc">{{ currentCategory.description }}</view>
      </view>
    </view>

    <!-- 菜谱列表 -->
    <view class="card-container">
      <!-- 菜谱卡片网格布局 -->
      <view class="recipe-grid">
        <view class="recipe-card" v-for="(item, idx) in recipeListData" :key="idx" @click="goToDetail(item.id)">
          <!-- 卡片图片区域 -->
          <view class="card-img-container">
            <image class="card-img" :src="item.cover_image || '/static/images/02.jpg'" mode="aspectFill"></image>
            <!-- 评分标签 -->
            <view class="rating-tag" v-if="item.comments?.[0]?.rating">
              <uni-icons size="20" color="#fff" type="star-filled"></uni-icons>
              <text>{{ item.comments?.[0]?.rating || '暂无评分' }}</text>
            </view>
          </view>
          <!-- 卡片信息区域 -->
          <view class="card-info">
            <!-- 标题区域 -->
            <view class="card-title">{{ item.title }}</view>
            <!-- 元信息区域 -->
            <view class="card-meta">
              <view class="meta-item">
                <text class="meta-label">难度：</text>
                <text class="meta-value">{{ item.difficulty || "暂无数据" }}</text>
              </view>
              <view class="meta-item">
                <text class="meta-label">耗时：</text>
                <text class="meta-value">{{ item.cook_time || "暂无数据" }}分钟</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空数据提示 -->
      <view class="empty-tip" v-if="recipeListData.length === 0">
        <uni-icons size="80" color="#ff6b6b" type="star-off"></uni-icons>
        <text>暂无菜谱数据</text>
      </view>
    </view>


  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getCategoryList } from "/apis/index.js"

const categoryTypeName = ref({}) // 分类type
const recipeListData = ref([]) // 分类数据
const categoryId = ref()	// 菜谱数据ID
const currentCategory = ref({})

// 接收页面参数
onLoad((option) => {
	categoryTypeName.value = option.type
})

// 页面开始加载数据
onMounted(async()=>{
	try{
		// 直接加载数据，不使用下拉刷新
		getCategoryListData(categoryTypeName.value)
	}catch(err){
		console.log("数据加载失败",err)
	}
})



// 获取分类数据
async function getCategoryListData(type) {
	try{
		// 显示加载状态
		uni.showLoading({
			title: '加载中...'
		})
		const data = await getCategoryList(type)
		// 直接使用获取到的数据
		recipeListData.value = data
		
		// 从API返回的数据中获取分类信息
		if (data && data.length > 0 && data[0].category) {
			currentCategory.value = data[0].category
		} else if (data && data.length > 0) {
			// 如果数据中有条目但没有分类信息，显示通用标题
			currentCategory.value = {
				name: '菜谱合集',
				description: '精选美食菜谱'
			}
		}
	}catch(err){
		console.log(err)
		// 显示错误提示
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		})
	}finally{
		// 隐藏加载状态
		uni.hideLoading()
	}
}

// 跳转到详情页
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${id}`
  })
}

// 回到menu页面
const goToMenu = () => {
  uni.switchTab({
    url: '/pages/menu/menu'
  })
}


</script>

<style lang="scss" scoped>
/* 页面容器 */
.category-page {
  background-color: #f9f9f9;
  min-height: 100vh;
  padding: 0;
  position: relative;
}

/* 顶部区域 */
.top-header {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  padding: 60rpx 30rpx 40rpx;
  position: relative;
  box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.2);
}

.header-content {
  text-align: center;
  color: #fff;
}

.header-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.header-desc {
  font-size: 28rpx;
  line-height: 44rpx;
  opacity: 0.9;
  max-width: 90%;
  margin: 0 auto;
}

/* 卡片容器 */
.card-container {
  padding: 20rpx;
  position: relative;
  z-index: 1;
}

/* 菜谱网格布局 */
.recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

/* 菜谱卡片 */
.recipe-card {
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #fff5f5;
  height: 100%;
}

.recipe-card:active {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.12);
}

/* 卡片图片容器 */
.card-img-container {
  position: relative;
  width: 100%;
  height: 240rpx;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.card-img:active {
  transform: scale(1.05);
}

/* 评分标签 */
.rating-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(255, 107, 107, 0.9);
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  gap: 6rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
}

/* 卡片信息 */
.card-info {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  min-height: 120rpx;
}

/* 卡片标题 */
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 44rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片元信息 */
.card-meta {
  display: flex;
  justify-content: space-between;
  padding: 0;
  background-color: transparent;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  font-weight: 500;
  color: #888;
  font-size: 26rpx;
}

.meta-value {
  color: #555;
  font-size: 26rpx;
  font-weight: 500;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: all 0.3s ease;
  backdrop-filter: blur(4rpx);
}

.back-button:active {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0.9);
}

/* 空数据提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  font-size: 28rpx;
  color: #999;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  margin-top: 40rpx;
  border: 1px solid #fff5f5;
  gap: 20rpx;
}



/* 加载中动画 */
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #ff6b6b;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 350px) {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
  
  .card-img-container {
    height: 300rpx;
  }
}
</style>